<template>
	<div class="footprint">
		<div class="liveReservation_h clear">
			<router-link to="/learn/history/book">点播记录</router-link>
			<router-link to="/learn/history/live">直播记录</router-link>
			<router-link to="/learn/history/album">专辑记录</router-link>
		</div>
		<div class="footprint" v-loading="loading">
			<ul>
				<li class="teachVideo_ls clear" v-for="item in footprintList" :key='item.id'>
					<a @click="openClass(item)" target="_blank" class="teachVideo_lsl fl box">
						<img :src="BASE_URL + item.picture" :onerror="errorImg">
					</a>
					<div class="teachVideo_lsr">
						<div class="teachVideo_lsr1 clear">
							<a @click="openClass(item)" target="_blank">{{item.video_name}}</a>
							<div class="teachVideo_lsr1_r fr">
								<el-popover placement="bottom" width="" popper-class="ioperation_hover" trigger="hover">
									<ul class="r_ioperation">
										<li @click="removeData(item.id)">删除</li>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>
						<!--  -->
						<div class="teachVideo_lsr2">
							<span>主讲：{{item.teacher_name}}</span>
							<span>学分: {{item.study_score}}</span>
							<span>时长: {{item.length}}</span>
						</div>
						<!-- 3 -->
						<div class="teachVideo_lsr5">
							<router-link :to="{path: '/learn/ask/index',query: {id: item.video_id}}">提问（{{item.question_count}}）</router-link>
							<router-link :to="{path: '/learn/note/index', query: {id: item.video_id}}">笔记（{{item.note_count}}）</router-link>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="pageBox" v-show="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<div class="dependent" v-show="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			footprintList: [],
			total_number: 0,
			page_size: this.$g.page_size,
			page_index: 1,
			errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"',
			placeholder: false,
			loading: true
		}
	},
	created() {
		this.getfootprint()
	},
	methods: {
		/*
			跳转到公开课模块查看视频
		 */
		openClass(item) {
			if(JSON.parse(sessionStorage.getItem('user_multistage'))) { // 多级不变，单机新增用户观看权限
					this.toDetailHtml(item)
			}else {
					let params = {
							type: 1, // (1 视频 2 直播)
							type_id: item.video_id, // （视频或直播id）, 
							user_id: JSON.parse(sessionStorage.getItem('user_info_str')).id // （用户id）
					}
					let success = res => {
						if(parseInt(res.data.islimit) === 1) {
								this.toDetailHtml(item)
						}else {
								this.$message.error('无法查看该视频，请联系管理员开通观看权限！')
						}
					}
					this.$ajax.get('api/video/get_islimit_by_video_user_id', {params, func: {success}})
			}
		},
		toDetailHtml(item) {
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')
			let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${item.video_id}`
			window.open(link)
		},
		getfootprint() {
			let success = (res => {
				let data = res.data;
				this.footprintList = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index);

				this.loading = false;
				this.placeholder = this.footprintList.length === 0 ? true : false
			});
			this.$ajax({
				url: 'api/video/video_record_list',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index,
					page_size: this.page_size
				},
				func: {
					success: success
				}
			})
		},
		change_page(val) {
			this.page_index = val;
			this.getfootprint()
		},
		//删除
		removeData(id) {
			this.$confirm('此操作是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them'
			}).then(() => {

				let success = (res => {
					this.$message.success(res.msg)
					this.getfootprint()
				})
				this.$ajax({
					url: 'api/video/video_record',
					method: 'delete',
					params: {
						id: id,
					},
					func: {
						success: success
					}
				})
			}).catch(() => {});
		},
	}
}
</script>